<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-11-16 14:05:28
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-16 14:10:58
-->
<template>
  <div class="app-container">
    <div class="editContaniner">
      <el-form ref="form" :model="form" label-width="120px" style="width:100%" :rules="rules">
        <el-form-item label="标题:" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容:" prop="content">
          <vue-ueditor-wrap v-model="form.content" :config="ueConfig" :destroy="true" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-top:20px" @click="save">立即提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import { getSign, addInformation } from '@/api/trembleSchool/informationChannel'
export default {
    components: {
        VueUeditorWrap
    },
    props: {},
    data() {
        return {
            form: {
                title: '',
                content: '',
                sign: ''
            },
            rules: {
                title: [
                    { required: true, message: '请输入资讯标题', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入资讯内容', trigger: 'change' }
                ]
            },
            ueConfig: {
                toolbars: [
                    [
                        'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeformat', '|', 'insertimage',
                        'insertvideo', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify'
                    ]
                ],
                initialFrameHeight: 450,
                initialFrameWidth: '100%',
                serverUrl: 'http://file.zhizhuedu.net/Public/qvnet/ueditor/php/controller.php',
                UEDITOR_HOME_URL: '/permissionHtml/UEditor/'
            }
        }
    },
    computed: {},
    watch: {},
    beforeCreate() {
    // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
    // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
    // 初始化渲染页面
    },
    beforeMount() {
    // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
    // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    // 获得签名
        this.getSign()
    },
    methods: {
        save() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log('通过验证！')
                    console.log('参数', this.form)
                    addInformation(this.form).then(res => {
                        if (res.code === 200) {
                            this.$notify({
                                title: '成功',
                                message: '添加成功',
                                type: 'success'
                            })
                            setTimeout(() => {
                                this.$store.dispatch('tagsView/delView', this.$route)
                                this.$router.replace('/trembleSchool/contentManagement/informationChannel')
                            }, 500)
                        }
                    })
                } else {
                    return false
                }
            })
        },
        getSign() {
            getSign({}).then(res => {
                console.log('res', res)
                if (res.code === 200) {
                    this.form.sign = res.data.sign
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.editContaniner{
  width: 75%;
  margin: 0 auto;
  margin-top: 60px;
}

</style>
